<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{background:#369;font-size:30px}
/* hr标签的默认样式：
Chrome、Firefox、Safari、IE6、IE7为双色线
IE8为单线 */
/* 去除border的难点在于IE6、IE7 */
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0;padding:0;border:none;overflow:hidden;
visibility:hidden;
/* IE6、IE7默认为双色线，此设置可使其变为单色 */
}
hr.firefox{
  display: block;
  height: 2px;
  border: 1px inset; /* 3D inset 边框 */
  margin: 0.5em auto 0.5em auto;
  color: gray;
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}
}
</style>
</head>
<body>
<h1>hr标签研究</h1>
<h3>对于hr高度的计算差异</h3>
<p>Chrome、Safari、IE8的hr高度与线宽单独计算，遵循盒模型。</p>
<p>IE6、IE7的hr默认高度2px，hr高度不受线宽影响，无论声明或未声明线宽时，线宽超出高度界限，也不会撑开高度。</p>
<h3>单设置hr高度为0的情况</h3>
<p>只设置height:0时，IE6、IE7仍有1px高度；Chrome、Safari、Firefox、IE8的视图高度为2px，实际上2px视图是3D inset边框,设定border:0或border:none均可以完全去除。</p>
<h3>单设置hr边框为0的情况</h3>
<p>边框为0对IE6、IE7无效，</p>
<h3>同时设置hr高度和边框为0的情况</h3>
<p>此时Chrome、Safari、Firefox、IE8看不到hr，而IE6、IE7能看到1px高度,margin负值和overflow:hidden无法消除。</p>
<h3>给定足够高度，在高度空间范围内设置border值</h3>
<p>此时能够发现：IE6、IE7视觉上的border比设置值多1px。</p>
<hr />
<p>至此，实验完成，可获得结论</p>
<hr />
<h3>hr标签研究结论</h3>
<p>IE6、IE7的hr标签的顽固线条并不是来自于CSS设定，而是hr内容部分固有的，这个顽强的bug无解。</p>
<h3>hr创建的实际间隔</h3>
<p>Chrome、Safari、Firefox、IE8有默认的margin，可完全去除间隔。</p>
<p>IE6、IE7有无法去除的间隔，上下各7px，也就是说其最小高度为15px。</p>


<div style="background:#123">123</div>
<hr>
<div style="background:#132">123</div>
<hr />
<div style="background:#213">123</div>
</body>
</html>
